🔥 "สาย Front-End ต้องแชร์ !!" กับสรุปรวมเครื่องมือ และ Framework ดี ๆ ที่ต้องบอกต่อสำหรับคนทำหน้าเว็บ <3
.
ต้องบอกว่าวันนี้แอดและทีมงานได้รวบรวมเครื่องมือเครื่องไม้ ที่จะทำให้งานยาก ๆ กลายเป็นงานง่าย ๆ ไว้ในที่เดียวให้แล้วว
.
⭐️ ใครที่กำลังเริ่มสาย Front-End หรือ ต้องการหาของดีรีบเข้ามาดูได้เลย สำหรับลิงก์ในการเข้าไปดาวน์โหลด / อ่าน Doc / วิธีการใช้งาน ดูด้านล่างได้เลยคร้าบผมมม ^__^
.
👩🎨เครื่องมือเด็ดที่คุณต้องแชร์ของสาย Frontend
.
📚 JavaScript Framework
.
Vue.js
https://vuejs.org/
.
Angular
https://angular.io/
.
React
https://reactjs.org/
.
Backbone.js
https://backbonejs.org/
.
🎨 CSS Framework
.
Bootstrap
https://getbootstrap.com/
.
Materialize
https://materializecss.com/about.html
.
Pure.css
https://purecss.io/
.
Bulma
https://bulma.io/
.
Semantic UI
https://semantic-ui.com/
.
📖 Library
.
sweetalert2 : สำหรับสร้าง Alert สวยๆได้ง่ายๆ
https://sweetalert2.github.io/
.
AlertifyJS : สร้าง Alert สวยๆเหมือนกัน
https://alertifyjs.com/
.
Chart.js : สำหรับสร้าง Chart แบบมี animation
https://www.chartjs.org/
.
jQuery : ใช้งาน JS และจัดการ DOM ได้ง่ายขึ้น
https://jquery.com/
.
DataTables : เปลี่ยน Table แบบเดิมๆให้ดูดีมี function ได้ง่ายๆ
http://fredsarmento.me/frontend-tools/
.
Quill editor : Text Editor สำหรับใส่ในเว็บเครื่องมือครบๆ
https://quilljs.com/
.
🧰 Developing & Debugging Tools
.
Chrome DevTools : เครื่องมือ Debug เว็บ เพียงแค่กด F12 เบราเซอร์อื่นๆก็มีเหมือนกัน
https://developers.google.com/web/tools/chrome-devtools
.
CodePen : Online Editor ที่สามารถจำลอง enviroment ที่เหมาะสมได้เขียนแล้วเห็นผลทันที
https://codepen.io/
.
WebStorm : Web Editor ที่รองรับ Framework ที่หลากหลาย
https://www.jetbrains.com/webstorm/
.
🍱 Other (Asset)
.
Google Fonts : font ฟรีสวยๆของ google
https://fonts.google.com/
.
awesome : Icon ฟรีสวยๆ
https://fontawesome.com/
.
figma : สำหรับออกแบบหน้าเว็บ จัดวางองค์ประกอบหรือแม้แต่สร้าง Prototype
https://www.figma.com/files/recent
.
Visual Inspector : extension chrome ที่ช่วยให้ตรวจสอบองค์ประกอบต่างๆของเว็บได้ค่อนข้างครบถ้วน
https://chrome.google.com/webstore/detail/visual-inspector/efaejpgmekdkcngpbghnpcmbpbngoclc
.
CSS Peeper : extension chromeอีกหนึ่งตัวที่ใช้ตรวจสอบองค์ประกอบเว็บ
https://chrome.google.com/webstore/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk
.
" หรือถ้าใครเคยใช้ตัวไหนมาแล้ว สามารถมาแบ่งปันประสบการณ์ในการใช้งานใน Comment กับแอดได้เลยยย ใครมีตัวไหนแนะนำใส่มาได้เต็มที่เลยคร้าบผมม <3 "
.
#BorntoDev - 🦖 Coding Academy ให้การพัฒนาเทคโนโลยีเป็นเรื่องง่ายสำหรับทุกคน
同時也有1部Youtube影片,追蹤數超過7萬的網紅在地上滾的工程師 Nic,也在其Youtube影片中提到,## 影片觀看說明 由於問題較多,大家的問題也可能是你的問題,建議可以先閱讀下方的「問題總匯」區,找到時間碼 Time code 之後跳轉到自己想聽的部分,會比較有效率哦 本影片 Q&A 留言是抓取 【2020 年度回顧! 成為 Team leader? 業外收入增加? 技術能力成長? (第一...
「css comment」的推薦目錄:
- 關於css comment 在 BorntoDev Facebook 的精選貼文
- 關於css comment 在 在地上滾的工程師 Nic Youtube 的最讚貼文
- 關於css comment 在 67 - Stack Overflow 的評價
- 關於css comment 在 No CSS Comments - sasstools/sass-lint · GitHub 的評價
- 關於css comment 在 7: How To Create HTML and CSS Comments | Learn HTML 的評價
- 關於css comment 在 Google HTML/CSS Style Guide 的評價
- 關於css comment 在 Why doesn't CSS allow single-line comments? [closed] 的評價
css comment 在 在地上滾的工程師 Nic Youtube 的最讚貼文
## 影片觀看說明
由於問題較多,大家的問題也可能是你的問題,建議可以先閱讀下方的「問題總匯」區,找到時間碼 Time code 之後跳轉到自己想聽的部分,會比較有效率哦
本影片 Q&A 留言是抓取
【2020 年度回顧! 成為 Team leader? 業外收入增加? 技術能力成長? (第一次蒐集 Q&A)】https://youtu.be/BGaDN9wxbKE
## 影片中提到的專案
簡單用 React 撰寫的留言爬取篩選功能,可以自己抓去玩
https://github.com/niclin/youtube-comment-filter
## 問題總匯
00:00 開場
01:26 QA-1 - 林天寸
一直很喜歡妳的頻道,不單單是因為工程師,當然也有部分原因是自己也是走工程師這條路的。
前一年2020年開始,其實是我剛轉職工程師的第一年,在滿多地方都遇到不小的問題,在troubleshooting上面也是有許多瓶頸的。
後來除了白天上班,下班看書跟休息,偶然間看到你的影片[工程師如何自我進修],才開始慢慢用計畫的方式取代橫衝猛幹。
不得不說,規劃時間真的是比起技術性的功力還更有成效。因為它讓你適時的放鬆跟加強,然後在工作上面才更有長進,雖然很幹話,但我2020的下半年是這樣做的。
目前在準備考取網路管理的證照CCNA,計畫是走network這一塊,還有很多要磨練的。希望也能多看你產出跟network的影片,這是私心話啦,哈哈。
02:57 QA-2 - 仔仔
1.學程式會建議從前端或是後端哪個開始學會比較好?
2.一開始投履歷如何判斷一家公司是可以成長的,而不是進去3,5年後還是那個跟剛進去程度相差不遠的自己差不多
3.跟程式相關的產業有很多(像是製造業到博弈),可以請Nic分析一下各產業的狀況嗎?以及進去各產業前須要具備哪些程式語言或能力?
4.投履歷時看到一些公司列出所需程式語言和工具一大堆,是不是代表你沒完全具備就不要投履歷了,還是可以請Nic給個意見哪些部分還是可以投看看
5.都說工程師又宅又不會說話,為什麼Nic可以交到女朋友?
10:40 QA-3 - ANDREW NG KAR EARN
如果当写编程语言遇到瓶颈,有什么方法可以有效地避免自己陷入钻牛角尖的情况?
11:46 QA-4 - JS Lin
如果NIC現在選擇能馬上精通一項語言會是哪個?會想用來做什麼PJ?
13:13 QA-5 - Rick0
成為 team leader 後無法直接在技術上有更深入的研究和突破,這樣的變化是否值得?
是否會擔心這樣在技術上跟不上其他人,甚至被下屬看輕呢?
14:39 QA-6 - Henry蔡
因為最近是寒假期間,
我開始考慮下學期的修課,
想請教nic大大,
應該在有什麼樣的基礎上,
開始學design patterns?
我目前是碩士生,
大學非資工本科,
學過Python,
也跟過一些網路影片實作過Flask+PostgreSQL,
大學學過資料結構演算法,
但不到得心應手的程度...
16:07 QA-7 - 黃柏瑋
如何同時Handle好好幾件事
我怎麼覺得上班,然後下班假日寫寫side project後就沒啥時間了🤔🤔🤔
17:24 QA-8 - 乾太
我想問一下這年頭轉行斜槓 VTuber 還有沒有搞頭A?
18:10 QA-9 - uuu06222
之前開始關注你有知道你有面試過人的經驗, 想問一下站在面試官的角度...
面試官會不會比較注重作品需要呈現那些東西, 或是有沒有什麼禁忌是不能碰的嗎?
20:07 QA-10 - Joery Lin
想請教您對於對於給你很多成長和照顧的公司,倘若您有一個更好的機會,無論薪水或未知挑戰都大於現在公司。
您將如何做選擇,或許現在公司會給你加薪留下你。
因為自己曾放棄了許多機會
21:37 QA-11 - YangTing Zheng
Q1: 想問通常一個產品開發的週期都多長呢?負責維運和開發的工作內容是否會差很多?
Q2: 想請您簡單介紹一下資工系學生的出路/工作內容?(如PM.SA.DBA.PG.RD.MIS…或是還有其他的?)
24:16 QA-12 - RTB
Hello World
24:18 QA-13 - Barry
目前是公司MIS 很想轉職成後端工程師,但在面試上面都都時常失敗
常常在問技術關卡時就被問倒了,總覺得 要準備的東西非常的龐大
毫無準備的頭緒,總覺得一直寫side project也不是辦法
26:49 QA-14 - 因地制夷
想請教Nic 有在做投資嗎? ex 股票 想聽一些投資心得
27:13 QA-15 - 比歐
想請教 Nic 大,
在之後的工程師生涯中之後有甚麼規劃或想法嗎?
例如:開發產品創業,或是開班授課、轉做顧問之類的。
28:14 QA-16 - yongming jia
请问新手如何学编程,学完去做什么?怎么自己创业?谢谢🙏
29:33 QA-17 - Minghao Chang
是否能請您推薦用來開發的筆電?(正好最近要汰換電腦),想從今年開始養成寫side project的習慣,謝謝。
30:31 QA-18 - Guan Jun Chen
想知道像Nic這麼厲害的工程師,年薪大概落在哪裡
30:46 QA-19 - Sheng Jiang
想請問Nic,如果非資工背景但是對寫程式有熱情,想轉職當軟體工程師,會建議如何起步?
補充:像是什麼樣的人適合自學,什麼樣的人適合去補習,或者補習跟自學的情況各有哪些優劣?
謝謝Nic
## 結尾
31:49 感想
喜歡影片的話!可以幫忙點個喜歡以及分享、訂閱唷!😘
━━━━━━━━━━━━━━━━
🎬 觀看我的生活廢片頻道: https://bit.ly/2Ldfp1B
⭐ instagram (生活日常): https://www.instagram.com/niclin_tw/
⭐ Facebook (資訊分享): https://www.facebook.com/niclin.dev
⭐ Blog (技術筆記): https://blog.niclin.tw
⭐ Linkedin (個人履歷): https://www.linkedin.com/in/nic-lin
⭐ 蝦皮賣場: https://shopee.tw/bboyceo
⭐ Github: https://github.com/niclin
⭐ Podcast: https://anchor.fm/niclin
━━━━━━━━━━━━━━━━
✉️ 合作邀約信箱: niclin0226@gmail.com
#QA #工程師 #在地上滾的工程師 #前端 #後端 #轉職
css comment 在 No CSS Comments - sasstools/sass-lint · GitHub 的推薦與評價
Rule no-css-comments will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments ( /*! */ , will be printed even in minified ... ... <看更多>
css comment 在 67 - Stack Overflow 的推薦與評價
... <看更多>
相關內容